The CSS Box model defines how elements are rendered and how their dimensions are calculated.It describes the structure of an element as a rectangular box that has content, padding, a border, and a margin.The box model consists of four main components, which are
When We Give An Element box-sizing Property With Value border-box So We Declare In CSS That Total Height Or Total Width Of That Elements Content Should Include Paddings And Borders Size Within The Height Or Width I Have Given For Example In Box 1 " I'm A Box " I Have Given Only Height Of 200px And Box Sizing Property So It Includes Padding And Border Too Like Content Is Given 176px, Padding Right & Left 10+10=20px, Border Right & Left 2+2=4px So Total Is 200px, Like So If You Give Width 200px Content Is 176px Padding Is Top & Bottom 10+10=20px And Border Is Top & Bottom 2+2=4px So Total Is 200px And Remember Margin Is Not Include In Both Width Or Height.
Margin Collapse's Concept Is That If Two Element's Margins Are Overlapping So The Element That Has Higher Margin Both Elements Margin That Is Overlapping Will Be Set To That Higher Margin If They Are Same Like 25px And 25px So It'll Set 25px.
